<template>
  <div class="Cinema-page">
    <!-- 主头部 -->
      <div class="header">
        <li @click="hangclick">{{ store.cityName }}<i class="iconfont icon-xiala"></i></li>

        <li>影院</li>
        <li class="iconfont icon-sousuo" @click="search"></li>
      </div>
      <div class="cinema-list">

        <van-dropdown-menu>
          <van-dropdown-item v-model="addresAreKeys" :options="optioncity" @change="hander" />
          <van-dropdown-item v-model="app" :options="optionApp" @change="handerApp" />
          <van-dropdown-item v-model="reset" :options="optionReset" @change="onlyAlert" />
        </van-dropdown-menu>
      </div>
  </div>
  <cinlist :tCinema="tCinemaFilter" :ticketFlag="ticketFlag"></cinlist>
</template>

<script setup>
import { userStore } from '@/stores/user'
import cinlist from "@/component/cinlist.vue"
import { getCinema } from "@/api/mm"
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"

const store = userStore()
const cityId = store.cityId
const addresAreKeys = ref("")
const ticketFlag = ref(1)

const optioncity = [
  { text: '全城', value: "" },
];

const app = ref(1)
const optionApp = [
  { text: 'APP订票', value: 1 },
  { text: '前台兑换', value: 2 },
];

const reset = ref("最近去过")
const optionReset = [
  { text: '最近去过', value: "最近去过" },
  { text: '离我最近', value: "离我最近" },
];

const tCinema = ref(null)
const tCinemaFilter = ref(null)
const router = useRouter()

const onlyAlert = (val) => {
  alert(val)
}
const hander = (val) => {
  addresAreKeys.value = val
  myfilter(val)
}

const myfilter = (val) => {
  if (val) {
    tCinemaFilter.value = tCinema.value.filter((item) => item.districtName == val)
  } else {
    tCinemaFilter.value = tCinema.value
  }
}

const handerApp = (val) => {
  ticketFlag.value = val;
  fetchdata(addresAreKeys.value)
}

const hangclick = () => {
  router.push("/city")
}

const fetchdata = async (val) => {
  tCinema.value = (await getCinema({
    cityId: cityId,
    ticketFlag: ticketFlag.value
  })).data.cinemas;

  tCinemaFilter.value = tCinema.value
  myfilter(val)
  getOptioncity()
}

const getOptioncity = () => {
  getDistrictNam().map((item) => {
    optioncity.push({
      text: item, value: item
    })
  })
}

const getDistrictNam = () => {
  let arr = []
  tCinema.value.map((item) => {
    if (arr.indexOf(item.districtName) == -1) {
      arr.push(item.districtName)
    }
  })
  return arr
}

const search = () => {
  router.push("/cinemas/search")
}

onMounted(() => {
  fetchdata()
})

</script>

<style scoped>
.Cinema-page {
  display: flex;
  flex-direction: column;
}

.fixed {
  position: fixed;
  background: #fff;
  width: 100%;
}

.header {
  width: 90%;
  height: 40px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20px;
}

.cinema-list {
  height: 50px;
  border-bottom: 1px solid #ededed;
  font-size: 14px;
}

.iconfont {
  font-size: 20px;
}

:deep(.van-dropdown-menu__bar) {
  box-shadow: none
}
</style>
